<template>
	<view class="padding-30">
		<view class="padding-30 border-radius20 bg-fff">
			<view class="flex-between f-divider1 padding-bottom30">
				<view class="fontSize-15 color-000">头像</view>
				<view class="flex-alignItems-center">
					<button class="avatar-image-btn" open-type="chooseAvatar" @chooseavatar="chooseavatar">
						<image class="img-68 avatar-image img-crisp-edges margin-right20" style="border-radius: 50%;"
							:src="avatar?avatar:'../../../static/image/user-01.png'" mode=""></image>
					</button>
					<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
				</view>
			</view>
			<view class="flex-between f-divider1 padding-bottom30 margin-top30">
				<view class="fontSize-15 color-000">昵称</view>
				<view class="flex-alignItems-center">
					<input type="nickname" style="width: 400rpx;text-align: right;" v-model="form.nickname"
						placeholder="输入您的昵称" @blur="handleInput"/>
					<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
				</view>
			</view>
			<view class="flex-between f-divider1 padding-bottom30 margin-top30">
				<view class="fontSize-15 color-000">院区</view>
				<view class="flex-alignItems-center" @click="hospitalShow = true">
					<view class="fontSize-16 color-000" v-if="hospital">{{hospital}}</view>
					<view class="fontSize-16 color-000" v-else>请选择</view>
					<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
				</view>
			</view>
		</view>
		
		
		<!-- 底部操作栏 -->
		<view style="height: 200rpx;"></view>
		<view class="position-fixed-bottom padding-30 bg-fff">
			<view class="btn50-0165FD-15ffffff flex-center" @click="SubmitEvent">
				保存
			</view>
		</view>
		
		<!-- 院区 -->
		<u-picker :show="hospitalShow" :columns="hospitalColumns" keyName="name"
		@cancel="cancelHospital" @confirm="confirmHospital"></u-picker>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				form:{
					avatar:'',
					nickname:'',
					hospital:''
				},
				avatar:'',
				hospitalShow:false,
				hospitalColumns:[],
				hospital:''
			}
		},
		onLoad() {
			this.getConfig()
		},
		onShow() {
			if(uni.getStorageSync('token')){
				this.getUserInfo()
			}
		},
		methods:{
			// 确认院区选择
			confirmHospital(e){
				this.hospital = e.value[0].name
				this.hospitalShow = false
			},
			// 取消院区选择
			cancelHospital(){
				this.hospitalShow = false
			},
			// 获取配置
			async getConfig(){
				let res = await this.$http.post(this.$api.config,{},{})
				let arr = []
				if(res.code == 1){
					Object.keys(res.data.hospital).forEach(key => {
					  // 执行循环体代码
					  arr.push({id:key,name:res.data.hospital[key]})
					});
					this.hospitalColumns.push(arr)
				}
			},
			// 获取个人信息
			async getUserInfo(){
				let res = await this.$http.post(this.$api.user_info,{},{token:true})
				if(res.code == 1){
					this.form.nickname = res.data.nickname
					this.form.avatar = res.data.avatar
					this.avatar = res.data.avatar
				}
			},
			// 选择昵称
			handleInput(e){
				console.log(e)
				this.form.nickname = e.detail.value
			},
			// 选择图片
			chooseavatar(e){
				uni.uploadFile({
					url: this.$api.upload + 'common/upload',
					filePath: e.detail.avatarUrl,
					name: 'file',
					header: {
						'token': uni.getStorageSync('token'),
					},
					success: res => {
						console.log(res)
						let result = JSON.parse(res.data);
						this.form.avatar = result.data.url;
						this.avatar = result.data.fullurl
					}
				});
			},
			// 提交
		 	async SubmitEvent(){
				this.form.hospital = this.hospital
				if(!this.form.avatar){
					return this.$tools.toast('请上传头像')
				}
				if(!this.form.nickname){
					return this.$tools.toast('请填写昵称')
				}
				if(!this.form.hospital){
					return this.$tools.toast('请选择院区')
				}
				let res = await this.$http.post(this.$api.profile,this.form,{token:true})
				if(res.code == 1){
					this.$tools.toast('提交成功')
					this.$tools.navigateBack(1,200)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.avatar-image-btn {
		// width: 200rpx;
		// height: 200rpx;
		background-color: transparent;
	}
	
	.avatar-image-btn::after {
		border: 1rpx solid #ffffff;
	}
	
	.cancel-btn-popup {
		width: 250rpx;
		height: 80rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #EE6100;
		background: #F0F0F0;
		border-radius: 9rpx 9rpx 9rpx 9rpx;
	}
	
	.confirm-btn-popup {
		width: 250rpx;
		height: 80rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		background: #EE6100;
		border-radius: 9rpx 9rpx 9rpx 9rpx;
	}
	
</style>